<template>
  <div class="participant-full-window" @mouseenter="showControls" @mouseleave="hideControlsAfterDelay">
    <span style="color: #fffff1 ; font-size: 12px ; line-height: 12px; margin-left: 5px; margin-top: 5px; position: absolute; ">
      {{ participant?.nickname }}
    </span>
    <video ref="remoteVideo" autoplay/>
    <div class="video-controls" :class="{ 'controls-visible': showControlsFlag }">
      <div class="control-btn" :style="{ backgroundColor:'rgba(255, 0, 0, 0.3)' }" @click="participantCancelFullScreen(participant.id)">
        <font-awesome-icon :icon="['fas', 'down-left-and-up-right-to-center']" :style="{ color: 'red' }"/>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
   name: "ParticipantFullWindow",
   props:{
     participantCancelFullScreen:{
       type: Function
     }
   },
   data(){
     return {
       showControlsFlag: false,
       hideTimer: null,
       participant: null
     }
   },
   methods:{
     showControls() {
       clearTimeout(this.hideTimer);
       this.showControlsFlag = true;
     },
     // 2s 后隐藏控件组
     hideControlsAfterDelay() {
       this.hideTimer = setTimeout(() => {
         this.showControlsFlag = false;
       }, 1000);
     },
     setParticipant(participant){
       this.participant = participant;
     },
     getParticipant(){
       return this.participant;
     }
   }
 }
</script>

<style scoped>
.participant-full-window{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
  transition: none;
  cursor: grab;
}

video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.video-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.controls-visible {
  opacity: 1;
  visibility: visible;
}

.control-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

</style>